<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 15:56:28
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-31 23:41:50
 * @FilePath: \guanggu_traffic\src\views\traffic\components\EventManage\EventManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 默认展开 -->
	<el-sub-menu index="4">
		<template #title>事件管理</template>
		<el-menu-item index="4-1" @click="addEvent">添加事件</el-menu-item>
		<el-menu-item index="4-2" @click="searchEvent"> 查询事件</el-menu-item>
		<el-menu-item index="4-3" @click="handleUpdateEvent"
			>开启事件更新</el-menu-item
		>
		<el-menu-item index="4-4" @click="closeUpdateEvent"
			>关闭更新事件</el-menu-item
		>
	</el-sub-menu>
	<!-- 添加事件 -->
	<AddEventDialog ref="addEventInstance"></AddEventDialog>
	<!-- 搜索事件 -->
	<SearchEvent
		ref="searchEventInstance"
		
	></SearchEvent>
	<!-- 更新事件 -->
	<UpdateEventPopup ref="updateEventInstance" @updateSuccess="updateSuccess"></UpdateEventPopup>
</template>

<script setup>
import AddEventDialog from './AddEventDialog.vue'
import SearchEvent from './SearchEvent.vue'
import UpdateEventPopup from './UpdateEventPopup.vue'
import { ref, onMounted, getCurrentInstance } from 'vue'
import icon from '@/assets/images/position-fill.png' //事件标记图标
import { Query } from '@/api/mapgis-api/Query'
const { proxy } = getCurrentInstance()
let map = null
onMounted(() => {
	map = proxy.$map
	map.addLayer(signLayer)
})

const addEventInstance = ref(null) //添加事件组件对话框实例
const searchEventInstance = ref(null) //搜索事件组件实例
const updateEventInstance = ref(null) //更新事件组件实例
//添加事件
const addEvent = () => {
	addEventInstance.value.addEvent()
}
const searchEvent = () => {
	//激活查询事件组件的激活画笔方法
	searchEventInstance.value.activeDraw()
}
//标记数据源
let signSource = new ol.source.Vector({})
//标记图层
let signLayer = new ol.layer.Vector({
	source: signSource,
	title: '事件标记',
})
//mapgis服务信息
let service = {
	docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
	layerId: 2,
}
//设置标记样式
function setMarkerStyle(url) {
	return new ol.style.Style({
		// {ol.style.IconOption};类型
		image: new ol.style.Icon({
			anchor: [0.5, 60],
			anchorOrigin: 'bottom-center',
			anchorXUnits: 'fraction',
			anchorYUnits: 'pixels',
			offsetOrigin: 'top-right',
			//图标缩放比例
			scale: 0.15,
			//butoumingdu
			opacity: 1,
			//图标url
			src: url,
		}),
	})
}
//开启事件更新回调
const handleUpdateEvent = () => {
	//先清空一下上一次的标记图层
	signSource.clear()
	Query.queryByLayerId(service).then((features) => {
		features.forEach((item) => {
			item.setStyle(setMarkerStyle(icon))
		})
		signSource.addFeatures(features)
	})
	//监听地图单击事件
	map.on('singleclick', function (event) {
		map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
			// console.log("feature",feature,layer);
			if (layer === signLayer) {
				const res = feature.values_.values_
				const coordinate = feature.values_.geometry.flatCoordinates
				//删除事件中 mapLayer属性
				delete res.mpLayer
				//打开事件弹窗
				updateEventInstance.value.setPopup({
					position: coordinate,
					data: res,
					ids: [feature.id_],
				})
			}
		})
	})
}
//更新事件成功
const updateSuccess = ({ id, status }) => {
    // console.log("id, status",id, status);
	const feature = signSource.getFeatureById(id)
	feature.values_.values_.处理状态 = status
}
//关闭更新事件回调
const closeUpdateEvent = () => {
	//隐藏标记图层
	signSource.clear()
	//关闭事件弹窗
	updateEventInstance.value.setPopup({ position: undefined })
}
</script>

<style lang="scss" scoped>

</style>
